<template>
  <div>
    <!--面包屑导航区域-->
    <el-breadcrumb style="margin-top: 10px; margin-bottom: 20px; margin-left: 25px;">
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>疫情资讯管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片区域-->
    <el-card>
      <!--搜索与添加区域-->
      <el-row :gutter="20">
        <!--搜索框-->
        <el-col :span="7" style="margin-bottom: 20px;">
          <el-input v-model="title" placeholder="请输入疫情资讯的标题来进行查询" clearable @clear="clearSelect()">
            <el-button slot="append" icon="el-icon-search" @click="selectByTitle(title)"></el-button>
          </el-input>
        </el-col>
        <!--添加用户按钮-->
        <el-col :span="4">
          <el-button type="primary" @click.native.prevent="AKVisible = true">发布疫情知识信息</el-button>
          <el-dialog title="发布疫情知识信息" :visible.sync="AKVisible" width="50%" @close="AKDialogClosed()">
            <!--添加添加疫情知识信息对话框的主体-->
            <el-form :model="addConsultList" label-width="80px" ref="addFormRef">
              <el-form-item label="信息标题" prop="title">
                <el-input v-model="addConsultList.title" style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="信息内容" prop="content">
                <el-input type="textarea" :rows="6" v-model="addConsultList.content"></el-input>
              </el-form-item>
              <el-form-item label="文件上传" style="text-align: left; display: flex">
                <el-button size="small" type="primary" @click="fileVisible = true">点击上传</el-button>
              </el-form-item>
              <el-dialog style="text-align: center;" title="文件上传" :visible.sync="fileVisible" width="37%"
                @close="fileDialogClosed" append-to-body>
                <el-form ref="file_ref">
                  <el-upload class="upload-demo" drag action="action" multiple :before-upload="beforeUpload"
                    :show-file-list="true" :auto-upload="false" :http-request="upload" ref="uploadBox">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip" style="text-align: center;">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                </el-form>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitFile">上传文件</el-button>
              </el-dialog>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="AKVisible = false">取 消</el-button>
              <el-button type="primary" @click.native.prevent="addConsult(addConsultList)">提 交</el-button>
            </span>
          </el-dialog>
        </el-col>
      </el-row>

      <!--用户列表区域-->
      <el-table :data="ConsultList.slice((pagenum - 1) * pagesize, pagenum * pagesize)" :border="true" stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="上传人" prop="uploadPerson"></el-table-column>
        <el-table-column label="上传时间" prop="uploadTime"></el-table-column>
        <el-table-column label="修改人" prop="updatePerson"></el-table-column>
        <el-table-column label="修改时间" prop="updateTime"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <!--修改按钮-->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="updateConsult(scope.row)"></el-button>
            <!--删除按钮-->
            <el-button type="danger" icon="el-icon-delete" size="mini"
              @click.native.prevent="deleteConsultById(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="demo-image__preview">
        <el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="urlList" style="z-index:9999" />
      </div>

      <!--修改资讯信息对话框-->
      <el-dialog v-model="setConsultList" :title=setConsultList.title :visible.sync="UKVisible" @close="testa = false">
        <el-form ref="UKform" :model="setConsultList">
          <el-form-item label="信息标题">
            <el-input v-model="setConsultList.title" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="信息内容">
            <el-input type="textarea" autosize v-model="setConsultList.content"></el-input>
          </el-form-item>
          <el-form-item label="文件上传" style="text-align: left; display: flex">
            <el-button size="small" type="primary" @click="fileVisible = true">点击上传</el-button>
          </el-form-item>
          <el-dialog style="text-align: center;" title="文件上传" :visible.sync="fileVisible" width="37%"
            @close="fileDialogClosed" append-to-body>
            <el-form ref="file_ref">
              <el-upload class="upload-demo" drag action="action" multiple :before-upload="beforeUpload"
                :show-file-list="true" :auto-upload="false" :http-request="upload" ref="uploadBox">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip" style="text-align: center;">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitFile">上传文件</el-button>
          </el-dialog>
          <el-form-item label="是否清空之前文件">
            <el-radio v-model="isClearOtherFiles" label="1">是</el-radio>
            <el-radio v-model="isClearOtherFiles" label="0">否</el-radio>
          </el-form-item>
        </el-form>
        <template>
          <el-table :data="tableData" style="width: 100%" max-height="250">
            <el-table-column fixed prop="fileName" label="文件名" width="150">
            </el-table-column>
            <el-table-column prop="fileLocation" label="文件位置" width="120">
            </el-table-column>
            <el-table-column prop="fileType" label="文件类型" width="120">
            </el-table-column>
            <el-table-column prop="uploadTime" label="上传时间" width="120">
            </el-table-column>
            <el-table-column prop="uploadPerson" label="上传人" width="300">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
              <template slot-scope="scope">
                <el-button @click.native.prevent="viewRow(scope.row)" type="text" size="small">
                  预览
                </el-button>
                <el-button @click.native.prevent="deleteRow(scope.row)" type="text" size="small">
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <div slot="footer" style="margin-top: -40px;">
          <el-button @click="UKVisible = false">关闭</el-button>
          <el-button type="primary" @click="submitConsult">修改</el-button>
        </div>
      </el-dialog>

      <!--分页区域-->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
        :page-sizes="[1, 2, 5, 10]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
        :total="total" style="margin-top: 10px; text-align: center">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
  const formData = new FormData()
  import {
    AddConsultInfoAPI,
    GetConsultInfoListAPI,
    RemoveConsultInfoAPI,
    UpdateConsultInfoAPI,
  } from '@/components/utils/api/consult_api.js'

  import { postImage, GetBinDingAPI ,RemoveInfo} from '@/components/utils/api/sysfile_api.js'
  export default {
    components: {
      'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
    },
    data() {
      return {
        testa: false,
        annexId: '',
        params: {},
        tableData: [],
        isClearOtherFiles: '0',
        title: '',
        AKVisible: false,
        UKVisible: false,
        ConsultList: [],
        setConsultList: {},
        addConsultList: {},
        total: 0,
        pagesize: 10,
        pagenum: 1,
        uploadId: '',
        fileVisible: false,
        imgViewerVisible: false,
        urlList: []
      }
    },
    created() {
      this.getConsultList()
    },
    methods: {

      //  关闭预览图片
      closeImgViewer() {
        this.imgViewerVisible = false;
        this.urlList = []
      },

      // 预览文件图片
      viewRow(info) {
        this.imgViewerVisible = true
        GetBinDingAPI(info.id).then(res => {
          this.urlList.push(res.data.data)
        })
      },

      // 移除文件列表中的文件
      deleteRow(info) {
            RemoveInfo({ id: info.refId }).then(res => {
                if (res.data.code == 200) {
                    this.$message.success("删除成功")
                }
            })

        },

      //上传文件前
      beforeUpload(file) {
        if (file) {
          formData.append('afiles', file)
        }
        else {
          this.$message.error("上传文件时出错")
        }
      },

      submitFile() {
        this.$refs.uploadBox.submit()
        this.fileVisible = false
      },

      //上传
      upload() {
        postImage(formData).then(res => {
          if (res.data.code == 200) {
            res.data.data.forEach(element => {
              this.annexId = element.id
            });
            this.$message.success("上传文件成功")
          } else {
            this.$message.error("上传文件失败")
          }
        })
      },

      //获取资讯疫情信息
      getConsultList() {
        GetConsultInfoListAPI({}).then(res => {
          this.ConsultList = res.data.data
          this.total = this.ConsultList.length
        })
      },
      // 清空搜索
      clearSelect() {
        this.ConsultList = []
        this.getConsultList()
      },
      selectByTitle(title) {
        var params = {
          title: title
        }
        GetConsultInfoListAPI(params).then(res => {
          this.ConsultList = res.data.data
          this.total = this.ConsultList.length
        })
      },
      //添加资讯疫情信息
      addConsult(form) {
        form.annexId = this.annexId
        AddConsultInfoAPI(form).then(res => {
          console.log("file: ConsultManage.vue:254  form", form)
          if (res.data.code == 200) {
            this.AKVisible = false
            this.$message.success(res.data.message)
            this.getConsultList()
          } else {
            this.$message.error(res.data.message)
          }
        })
      },

      //打卡弹窗关闭重置
      fileDialogClosed() {
        this.afiles = ""
      },
      //清空添加信息框
      AKDialogClosed() {
        this.$refs.addFormRef.resetFields()
      },


      //删除资讯疫情信息
      deleteConsultById(id) {
        var params = {
          id: id
        }
        RemoveConsultInfoAPI(params).then(res => {
          if (res.data.code == 200) {
            this.$message.success(res.data.message)
          } else {
            this.$message.error("修改失败")
          }
          this.getConsultList()
        })
      },

      //修改疫情资讯信息
      updateConsult(information) {
        this.UKVisible = true
        this.setConsultList = information
        this.tableData = information.annex
      },

      //提交修改后的疫情资讯信息
      submitConsult() {
        this.params.id = this.setConsultList.id
        this.params.title = this.setConsultList.title
        this.params.content = this.setConsultList.content
        this.params.isClearOtherFiles = this.isClearOtherFiles
        this.params.annexId = this.annexId
        UpdateConsultInfoAPI(this.params).then(res1 => {
          if (res1.data.code == 200) {
            this.$message.success("修改成功")
            this.UKVisible = false
          }
          else {
            this.$message.error("修改失败")
          }
          this.getConsultList()
        })
      },

      //监听pagesize改变的事件
      handleSizeChange(newSize) {
        this.pagesize = newSize
      },

      //监听页码值改变的事件
      handleCurrentChange(newPage) {
        this.pagenum = newPage
      },
    }
  }
</script>